<template>
  <div class="channelComponent">
    <van-action-sheet v-model="show" title="频道管理">
      <!-- 我的频道 -->
      <div class="channel-box">
        <div class="title">
          <span>我的频道</span>
          <van-button
            @click="delShow = !delShow"
            size="mini"
            plain
            type="danger"
            >{{ delShow ? "取消" : "编辑" }}</van-button
          >
        </div>

        <!-- 宫格 -->
        <van-grid>
          <van-grid-item v-for="(item, index) in myList" :key="item.id">
            <div>
              <span
                @click="intoChannel(index)"
                :class="{ active: index == value }"
                >{{ item.name }}</span
              >
              <van-icon
                v-show="index !== 0 && delShow"
                @click="del(index)"
                class="del-icon"
                name="cross"
              />
            </div>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 可选频道 -->
      <div class="channel-box">
        <div class="title">
          <span>可选频道</span>
        </div>

        <!-- 宫格 -->
        <van-grid>
          <van-grid-item
            v-for="item in optionalChannels"
            @click="add(item)"
            :key="item.id"
            :text="item.name"
          />
        </van-grid>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { setChannelsAPI } from "@/api/channels";
export default {
  props: {
    myList: {
      // 规则：必须传入
      required: true,
      // 规定传入类型
      type: Array,
    },
    allList: {
      required: true,
      type: Array,
    },
    // 找父组件要当前高亮的下标
    value: {
      required: true,
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      show: false,
      delShow: false,
    };
  },
  methods: {
    // 添加频道
    add(item) {
      // 父传子是单向数据流，本质上是不能改栈上的数据
      // 我们push是给堆添加数据，因此不会报错，子变父也会变
      this.myList.push(item);
      this.saveChannels();
    },
    del(index) {
      this.myList.splice(index, 1);
      // 如果删高亮前面的下标，会导致数组前移，高亮下标会保持当前
      // 解决办法：因为单向数据流，所以我们叫父改
      if (index < this.value) {
        this.$emit("input", this.value - 1);
      }
      this.saveChannels();
    },
    // 我的频道被点击了，让父组件获取被点击的下标
    intoChannel(index) {
      this.$emit("input", index);
      this.show = false;
    },
    // 数据持久化方法
    async saveChannels() {
      // 判断是否登录
      if (this.$store.state.tokenObj.token) {
        // 登录则发请求
        const channels = this.myList.map((item, index) => {
          return {
            id: item.id,
            seq: index,
          };
        });
        await setChannelsAPI({
          channels,
        });
      } else {
        // 否则直接保存在本地
        localStorage.setItem("channels", JSON.stringify(this.myList));
      }
    },
  },
  // 计算属性
  computed: {
    // 获取可选频道
    optionalChannels() {
      /* return this.allList.filter((v) => {
        // 
        const idx = this.myList.findIndex((item) => {
          // 相同返回下标，否则为-1
          if (item.id == v.id) {
            return true;
          } else {
            return false;
          }
        });
        return idx == -1;
      }); */

      // 代码优化
      return this.allList.filter(
        (v) => this.myList.findIndex((item) => item.id == v.id) == -1
      );
    },
  },
};
</script>

<style scoped lang='less'>
.channel-box {
  padding: 20px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .del-icon {
    position: absolute;
    top: 3px;
    right: 3px;
  }
}

.active {
  color: red;
}
</style>